import { Button, Card, Cascader, Form, Input, Steps, message } from 'antd'
import { useBrandSearch, useCommodityClassifySearch } from '@/api/query'

import { useState } from 'react'

const { Step } = Steps

// 表单一 进行商品的添加
const FormStepOne = ({ onNext }) => {
  // 设置当前的选中的分类
  const [currentValue, setCurrentValue] = useState<number[]>([])

  //设置选中的设备
  const [currentBrand, setCurrentBrand] = useState<number[]>([])

  // 当前商品的属性id
  const [productCategoryId, setProductCategoryId] = useState<number>(0)
  console.log('productCategoryId防止报错', productCategoryId)
  // 当前商品 id
  const [brandId, setBrandId] = useState<number>(0)
  console.log('brandId防止报错', brandId)
  const [form] = Form.useForm()

  // 获取商品类型的检索数据
  const {
    data: dataClassify,
    isLoading: ClassifyLoading,
    isError: ClassifyError
  } = useCommodityClassifySearch()

  // 获取商品品牌检索数据
  const {
    data: dataBrand,
    isLoading: SearchLoding,
    isError: SearchError
  } = useBrandSearch()

  if (SearchLoding || ClassifyLoading) {
    return <div>Loading...</div>
  }
  if (SearchError || ClassifyError) {
    return <div>Error: content error</div>
  }

  // 获取选中的类型数据
  const onChangeClassify = (value: number[]) => {
    setCurrentValue(value)
    setProductCategoryId(value.length > 0 ? value[value.length - 1] : 0)
  }

  // 获取选中的品牌数据
  const onChangeBrand = (value: number[]) => {
    setBrandId(value.length > 0 ? value[0] : 0)
    setCurrentBrand(value)
  }

  return (
    <Form form={form} onFinish={onNext}>
      <Form.Item label="商品分类">
        <Cascader
          options={dataClassify.newList}
          onChange={onChangeClassify}
          value={currentValue}
        />
      </Form.Item>
      <Form.Item label="商品品牌">
        <Cascader
          options={dataBrand.newList}
          onChange={onChangeBrand}
          value={currentBrand}
        />
      </Form.Item>
      <Form.Item
        label="商品名称"
        name="name"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="商品介绍"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="商品货号"
        name="code"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input />
      </Form.Item>
      <Button type="primary" htmlType="submit">
        下一步
      </Button>
    </Form>
  )
}

// 表单二 进行商品的属性
const FormStepTwo = ({ onPrev, onNext }) => {
  const [form] = Form.useForm()

  const back = () => {
    onPrev()
  }

  return (
    <Form form={form} onFinish={onNext}>
      <Form.Item
        label="商品售价"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="商品库存"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="商品销量"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="排序"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input />
      </Form.Item>
      <Button type="primary" htmlType="submit">
        完成
      </Button>
      <Button onClick={back}>上一步</Button>
    </Form>
  )
}

const FormSwitcher = () => {
  const [currentStep, setCurrentStep] = useState(0)

  const handleNext = () => {
    setCurrentStep(currentStep + 1)
  }

  const handlePrev = () => {
    setCurrentStep(currentStep - 1)
  }

  const handleFinish = () => {
    console.log('Form submitted!')
    message.success('添加成功')
  }

  return (
    <div style={{ margin: '0 auto' }}>
      <Card style={{ width: '70%', margin: '0 auto' }}>
        <Steps current={currentStep}>
          <Step title="填写商品信息" />
          <Step title="填写商品属性" />
          {/* <Step title="Step 3" /> */}
        </Steps>
        {currentStep === 0 && <FormStepOne onNext={handleNext} />}
        {currentStep === 1 && (
          <FormStepTwo onPrev={handlePrev} onNext={handleFinish} />
        )}
      </Card>
    </div>
  )
}

export default FormSwitcher
